/*temp content*/
var Content=React.createClass({
	render:function(){
		return (
			<div></div>
		)
	}
});

(function(window){
	/*header--NewSocialAccount*/
	var NewSocialAccount=React.createClass({
		createAccount:function(){
			var app=this.props.app,
				name=this.refs.name.value,
				appId=this.refs.appId.value,
				appSecret=this.refs.appSecret.value;

			if(!name){
				alert('请输入公众账号名称');return
			}
			if(!appId){
				alert('请输入AppID');return
			}
			if(!appSecret){
				alert('请输入AppSecret');return
			}

			this.close();

			$.ajax({
				type:'post',
				url:'/me/accounts',
				data:{
					name: name,
					appId: appId,
					appSecret: appSecret
				},
				dataType:'json',
				success:function(data){
					if(data.success){
						var accounts=app.state.accounts;
						accounts.push(data.data);
						app.setState({
							accounts:accounts
						});
						var accountIndex=localStorage.getItem('account'),
							chosen=_.find(accounts,function(i,index){ return index==accountIndex}) || accounts[0];
						app.setSocialAccount(chosen)
					}
				}
			})
		},
		addAccountByOAuth: function() {
			window.location.hash = "";
			window.open("/wechat/platform/redirect", "oauth_window", "width=1000px,height=800");
		},
		close:function(){
			Backbone.history.history.back()
		},
		render:function(){
			var type=this.props.type;

			return (
				<div className="modal" style={{display:'block'}}>
					<div className="modal-dialog">
						<div className="modal-content box">
							<div className="modal-header">
								<button type="button" className="close" data-dismiss="modal" aria-label="Close" onClick={this.close}>
									<span aria-hidden="true">×</span>
								</button>
								<h4 className="modal-title">连接微信账号</h4>
							</div>
							<div className="modal-body">
								<div className="nav-tabs-custom">
									<ul className="nav nav-tabs">
										{type!=2?<li className="active"><a href="#tab_1" data-toggle="tab">公众号配置项方式</a></li>:''}
										{type!=1?<li className={type==2?"active":""}><a href="#tab_2" data-toggle="tab">一键登录授权</a></li>:''}
									</ul>
									<div className="tab-content">
										<div className={type!=2?"tab-pane active":"tab-pane"} id="tab_1">
											<div className="form-horizontal">
												<div className="box-body">
													<div className="form-group">
														<label htmlFor="inputEmail3" className="col-sm-4 control-label">公众账号名称</label>
														<div className="col-sm-8">
															<input type="text" className="form-control" ref="name" placeholder="输入一个名字标识你的公众账号名称" />
														</div>
													</div>
													<div className="form-group">
														<label htmlFor="inputPassword3" className="col-sm-4 control-label">AppID（应用ID）</label>
														<div className="col-sm-8">
															<input type="text" className="form-control" ref="appId" placeholder="输入AppID" />
														</div>
													</div>
													<div className="form-group">
														<label htmlFor="inputEmail3" className="col-sm-4 control-label">AppSecret（应用秘钥）</label>
														<div className="col-sm-8">
															<input type="text" className="form-control" ref="appSecret" placeholder="输入AppSecret" />
														</div>
													</div>
												</div>
												<div className="box-footer">
													<button type="submit" className="btn btn-primary btn-block" onClick={this.createAccount}>创建公众号连接</button>
												</div>
											</div>
										</div>
										<div className={type==2?"tab-pane active":"tab-pane"} id="tab_2">
											<div className="box-body">
												<div className="form-group">
													<p>跨屏朋友圈是腾讯一键登录授权官方认证平台。一键登录授权是腾讯为公众号第三方平台提供给公众号运营者在面向垂直行业需求时，可以通过一键登录授权给第三方开发者，来完成相关能力。</p>
													<p>一键登录授权的官方说明 <a href="https://open.weixin.qq.com" target="_blank">https://open.weixin.qq.com</a></p>
												</div>
											</div>
											<div className="box-footer">
												<form className="form-horizontal">
													<button className="btn btn-primary btn-block" onClick={this.addAccountByOAuth}>一键登录授权</button>
												</form>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			)
		}
	});

	/*header--SocialAccount*/
	var AccountItemPlus=React.createClass({
		render:function(){
			return (
				<li className="user user-menu user-plus" title="新增账号" >
					<a href="#bind-social-account/2"><i className="fa fa-plus user-image" alt="新增账号" ></i></a>
				</li>
			)
		}
	});

	var AccountItem=React.createClass({
		setChosen:function(){
			var data=this.props.data,
				setSocialAccount=this.props.setSocialAccount;

			setSocialAccount(data.type)
			//window.open("/wechat/platform/redirect", "oauth_window", "width=1000px,height=800");
		},
		render:function(){
			var data=this.props.data,
				appId=this.props.appId,
				isLock=this.props.isLock;

			return (
				<li className={"user user-menu"+(isLock?' active':'')} data-toggle="modal" data-target="#myModal" onClick={!isLock?this.setChosen:null} title={data.type} >
					<a href="javascript:void(0)"><img src={data.logo} className="user-image" alt={data.type} /></a>
				</li>
			)
		}
	});

	var SocialAccount=React.createClass({
		socialType:[
			{
				type:'wechat',
				logo:'/images/icons/wechat.png'
			}/*,
			{
				type:'dianping',
				logo:'/images/icons/dianping.png'
			},
			{
				type:'weibo',
				logo:'/images/icons/weibo.jpeg'
			}*/
		],
		render:function(){
			var setSocialAccount=this.props.setSocialAccount,
				socialAccount=this.props.socialAccount,
				list=this.socialType.map(function(i,index){
					var isLock=!!_.find(socialAccount,{type:i.type});

					return (
						<AccountItem key={index} index={index} data={i} isLock={isLock} setSocialAccount={setSocialAccount} />
					)
				});

			return (
				<ul className="nav navbar-nav social-account">
					{list}
				</ul>
			)
		}
	});	

	/*header--UserAccount*/
	var UserAccount=React.createClass({
		getInitialState:function(){
			return {
				open:"false"
			}
		},
		showdiv: function(){
			var open = this.state.open;
			this.setState({
				open: !this.state.open
			});
		},
		render:function(){
			var state=this.props.userAccount,
				open = this.state.open,
				showdiv = this.showdiv;

			return (
				<div className="navbar-custom-menu" style={{marginRight:'5px'}}>
					{state.hasUserAccount?<ul className="nav navbar-nav">
						<li className="dropdown user user-menu">
							<a href="#" className="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
								<div style={{backgroundImage:'url('+state.src+')'}} className="user-image user-image-bg" alt="User Image"></div>
								<span className="hidden-xs">{state.name}</span>
							</a>
							<ul className="dropdown-menu">
								<li className="user-header">
									<img src={state.src} className="img-circle" alt="User Image" />
									<p>
										{state.name}
										<small style={{display:'none'}}>注册自 {state.date}</small>
										{state.hash_id?<small>hash_id：{state.hash_id}</small>:null}
									</p>
								</li>
								<li className="user-body" style={{display:'none'}}>
									<div className="row">
										<div className="col-xs-12 text-center">
											当前空间使用{state.used} / 共{state.total}
										</div>
									</div>
								</li>
								<li className="user-footer">
									<div className="pull-left">
										<a href="/settings/profile" className="btn btn-default btn-flat">{i18next.t('personal_information.change.information')}</a>
									</div>
									<div className="pull-right">
										<a href="/logout" className="btn btn-default btn-flat">{i18next.t('personal_information.logout')}</a>
									</div>
								</li>
							</ul>
						</li>
					</ul>:''}
				</div>
			)
		}
	});
	
	/*header--BusinessAccount*/
	var BusinessItem=React.createClass({
		render:function(){
			var data=this.props.data,
				url=data.active?'javascript:void(0)':data.url;

			return (
				<li><a href={url}>{data.name}</a></li>
			)
		}
	});

	var BusinessAccount=React.createClass({
		getInitialState:function(){
			this.props.getBusinessAccount(this);
			return {
				data:[]
			}
		},
		render:function(){
			var data=this.state.data,
				businessName='请选择企业账号',
				list=data.map(function(i,index){
					if(i.active){
						businessName=i.name
					}
					return (
						<BusinessItem key={index} data={i} />
					)
				});

			return (
				<div className="navbar-custom-menu">
					<ul className="nav navbar-nav">
						<li className="dropdown">
							<a href="#" className="dropdown-toggle" data-toggle="dropdown">{businessName} <span className="caret"></span></a>
							<ul className="dropdown-menu" role="menu" style={{left:'auto',right:0}}>
								{list}
							</ul>
						</li>
					</ul>
				</div>
			)
		}
	});

	/*header--main*/
	var Header=React.createClass({
		toggle:function(){
			var collapse=document.getElementsByTagName('body')[0].getAttribute('class').indexOf('sidebar-collapse')>=0;
			$.ajax({
				type:'post',
				url:'/setcollapse',
				data:{
					collapse:!collapse
				},
				dataType:'json',
				success:function(data){
					console.log(data)
				}
			})
		},
		render:function(){
			var userAccount=this.props.userAccount,
				isBluemp=userAccount.ref=='bluemp';
			var logo = '/dashboard/images/sign-in-logo.png';
			if (['localhost:3000', 'onwall-ppe.parllay.cn', 'billboards.parllay.cn'].indexOf(location.host) < 0) {
				logo = "/oem/" + location.host + "/images/logo.png";
			}
			return (
				<header className="main-header">
					{!isBluemp?<a href="/" className="logo">
						<img src={logo} width="50" height="50" className="logo-mini" />
					</a>:null}
					<nav className="navbar navbar-static-top">
						<a href="#" className="sidebar-toggle" data-toggle="offcanvas" role="button" onClick={this.toggle}>
							<span className="sr-only">Toggle navigation</span>
						</a>
						<div className="navbar-custom-menu">
							<ul className="nav navbar-nav">
								<li><a href="https://billboards.kf5.com" target="_blank">{i18next.t('console.home.help')}</a></li>
								{!isBluemp?<UserAccount userAccount={userAccount} />:null}
							</ul>
							
						</div>
					</nav>
				</header>
			)
		}
	});

	/*<span className="logo-mini"><b>跨</b>屏</span>
	<span className="logo-lg"><b>跨</b>屏</span>*/

	/*footer--main*/
	var Footer=React.createClass({
		render:function(){
			return (
				<footer className="main-footer">
					<div className="pull-right hidden-xs">{i18next.t('console.home.support_email')} <a href="mailto:support@parllay.cn">support@parllay.cn </a>| {i18next.t('console.home.support_phonenov')} 400-101-2035</div>
					{i18next.t('console.home.banben')}
				</footer>
			)
		}
	});

	/*sidebar*/
	var SubTreeView=React.createClass({
		render:function(){
			var data=this.props.data,
				path=location.pathname,
				title=document.title.split('-')[0],
				active=path.indexOf(data.url)>=0 || title==data.name;
			
			return (
				<li className={active?"active":""}>
					<a href={data.url}>
						<i className="fa fa-circle-o"></i> {data.name}
					</a>
				</li>
			)
		}
	});

	var TreeView=React.createClass({
		render:function(){
			var data=this.props.data,
				path=location.pathname,
				active=path==data.url,
				subData=data.sub,
				subHtml='';

			if(subData){
				subHtml=<ul className="treeview-menu menu-open">
					{subData.map(function(i,index){
						return (
							<SubTreeView key={index} data={i} />
						)
					})}
				</ul>
			}
			
			return (
				<li className={active?"treeview active":"treeview"}>
					<a href={data.url}>
						<i className={"fa "+data.icon}></i>
						<span> {data.name}</span>
						<i className="fa fa-angle-left pull-right"></i>
					</a>
					{subHtml}
				</li>
			)
		}
	});

	var SidebarMenu=React.createClass({
		getInitialState:function(){
			this.props.getSideBar(this);
			return {
				data:[]
			}
		},
		render:function(){
			var data=this.state.data.map(function(i,index){
				return (
					<TreeView key={index} data={i} />
				)
			});
			return (
				<aside className="main-sidebar">
					<section className="sidebar">
						<div className="user-panel"></div>
						<ul className="sidebar-menu">
							{data}
						</ul>
					</section>
				</aside>
			)
		}
	});

	/*wrapper*/
	var ContentHeader=React.createClass({
		render:function(){
			var ele=document.getElementById('wrapper'),
				title=ele.getAttribute('data-title'),
				subtitle=ele.getAttribute('data-subtitle'),
				socialAccount=this.props.socialAccount;

			return (
				<section className="content-header">
					<h1>{title}<small>{socialAccount.name}</small></h1>
				</section>
			)
		}
	});

	var Wrapper=React.createClass({
		getInitialState:function(){
			return {
				socialAccount:{
					app_id:0
				},
				accounts:[],
				accountLock:true,
				userAccount:{
					name:'获取中..',
					src:'//cdn2.parllay.cn/dashboard/images/default_profile_image.png',
					date:'--',
					used:'0G',
					total:'0G',
					hasUserAccount:true,
					ref:''
				}
			}
		},
		componentDidMount:function(){
			var getUserInfo=this.props.getUserInfo;
			if(getUserInfo){
				getUserInfo(this)
			}
			//$.AdminLTE.layout.fix()
		},
		componentDidUpdate:function(){
			var ref=this.state.userAccount.ref;
			if(ref=='bluemp' && document.body.className!='skin-blue layout-top-nav'){
				document.body.className='skin-blue layout-top-nav'
			}
		},
		setSocialAccount:function(account,lock){
			this.setState({
				socialAccount:account,
				accountLock:lock
			})
		},
		render:function(){
			var getSideBar=this.props.getSideBar,
				getSocialAccount=this.props.getSocialAccount,
				getBusinessAccount=this.props.getBusinessAccount,
				socialAccount=this.state.socialAccount,
				appId=socialAccount.app_id,
				contentData=this.props.contentData,
				accounts=this.state.accounts,
				accountLock=this.state.accountLock,
				userAccount=this.state.userAccount;

			return (
				<div className="wrapper">
					<Header
					userAccount={userAccount} />
					{userAccount.ref!='bluemp'?<SidebarMenu getSideBar={getSideBar} />:null}
					<div className="content-wrapper" id="content">
						<Content options={{
							wrapper:this,
							socialAccount:socialAccount,
							contentData:contentData,
							userAccount:userAccount
						}} />
					</div>
					<Footer />
					<div id="modal"></div>
				</div>
			)
		}
	});
	
	var components={
		NewSocialAccount:NewSocialAccount,
		AccountItem:AccountItem,
		SocialAccount:SocialAccount,
		UserAccount:UserAccount,
		BusinessItem:BusinessItem,
		BusinessAccount:BusinessAccount,
		Header:Header,
		SubTreeView:SubTreeView,
		TreeView:TreeView,
		SidebarMenu:SidebarMenu,
		ContentHeader:ContentHeader,
		Wrapper:Wrapper
	}

	window.parllayComponents=$.extend((window.parllayComponents||{}),components)

})(window);

//functions
function refreshOfficialAccount(lock){
	/*$.ajax({
		type:'get',
		url:'/me/accounts',
		dataType:'json',
		success:function(data){
			if(data.length && AppMain){
				AppMain.setState({
					accounts:data,
					accountLock:lock || false
				});
				var accountIndex=localStorage.getItem('account'),
					chosen=_.find(data,function(i,index){ return index==accountIndex}) || data[0];
				AppMain.setSocialAccount(chosen)
			}else{
				var fake={app_id:null};
				AppMain.setSocialAccount(fake,lock || false)
			}
		}
	})*/
}